<template>
  <div class="tree" :class="getClass()">
    <div v-for="(item, index) in treeList" :key="index" class="treeBox">
      <div
        class="min-w-[120px] content-center grid checked-box"
        :name="item.name"
      >
        <el-checkbox
          :label="item.name"
          :indeterminate="item.indeterminate"
          :checked="item.checked"
          @change="change(item)"
        >
          <el-tooltip
            effect="dark"
            :content="item.name"
            placement="top-end"
            :show-arrow="false"
            v-if="item.name.length > 8"
            :hide-after="0"
          >
            <el-text truncated >
              {{ item.name }}
            </el-text>
          </el-tooltip>

          <el-text truncated v-else>
            {{ item.name }}
          </el-text>
        </el-checkbox>
      </div>
      <tree
        v-if="item.childs && item.childs.length > 0"
        :treeList="item.childs"
        @changes="change"
      ></tree>
    </div>
  </div>
</template>

<script lang="ts" setup>
const props = defineProps({
  treeList: {
    type: Array<any>,
    default: []
  }
});
const emits = defineEmits(["changes"]);
function change(item: any) {
  emits("changes", item);
}
function getClass() {
  let haveChild = false;
  props.treeList.forEach((item: any) => {
    if (item.childs && item.childs.length > 0) {
      haveChild = true;
    }
  });
  if (haveChild) {
    return "tree-box";
  } else {
    return "tree-box-no";
  }
}
</script>

<style lang="scss" scoped>
.tree-box {
  .checked-box {
    padding-left: 8px;
    border-bottom: var(--el-table-border);
    border-right: var(--el-table-border);
    overflow: hidden;
  }

  .treeBox {
    display: grid;
    grid-template-columns: 0.25fr 0.75fr;
  }
}

.tree-box-no {
  display: grid;
  grid-template-columns: repeat(3, minmax(110px, 1fr));
  grid-auto-rows: minmax(30px, auto);
  grid-gap: 0;
  border-bottom: var(--el-table-border);
  border-right: var(--el-table-border);

  .checked-box {
    border: 0;
    overflow: hidden;
  }

  .treeBox {
    display: grid;
    grid-template-columns: 1fr;
  }
}
</style>
